<template>
  <el-container style="min-height: 100vh">

    <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
               background-color="rgb(48, 65, 86)"
               text-color="#fff"
               active-text-color="#ffd04b"
               :collapse-transition="false"
               :collapse="isCollapse"
      >
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; right: 5px">
          <b style="color: white" v-show="logoTextShow">营销活动后台管理系统</b>
        </div>
        <zui-button style="background: #0b8ba5" @click="onButtonClick('MarketingManagementSystem')">活动管理</zui-button>
        <zui-button style="background: #0b8ba5" @click="onButtonClick('MarketingPartManagementSystem')">活动参与管理</zui-button>
<!--        <el-submenu index="1">-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-message"></i>-->
<!--            <span slot="title">活动管理</span>-->
<!--          </template>-->
<!--          <zui-button @click="onButtonClick('MarketingManagementSystem')">活动管理</zui-button>-->
<!--        </el-submenu>-->
<!--        <el-submenu index="2">-->
<!--          <template slot="title">-->
<!--            <i class="el-icon-menu"></i>-->
<!--            <span slot="title">活动参与管理</span>-->
<!--          </template>-->
<!--          <zui-button @click="onButtonClick('MarketingPartManagementSystem')">活动参与管理</zui-button>-->
<!--        </el-submenu>-->

      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 70px; cursor: pointer">
          <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息</el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>

      <el-main>
        <div style="margin-bottom: 30px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入楼房ID" suffix-icon="el-icon-search"  v-model="campaignID"></el-input>
          <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
          <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
          <el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
          <el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
          <el-table-column prop="participantID" label="ID" width="140">
          </el-table-column>
          <el-table-column prop="campaignID" label="楼房ID" width="140">
          </el-table-column>
          <el-table-column prop="tenantID" label="用户ID" width="120">
          </el-table-column>
          <el-table-column prop="participationDate" label="参与时间" :formatter="formatDate">
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.participantID)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>


        <el-dialog title="新增活动" :visible.sync="dialogFormVisible" width="30%">
          <el-form ref="form" :model="form" label-width="90px" size="small">
            <el-form-item label="活动楼房ID">
              <el-input v-model="form.campaignID"></el-input>
            </el-form-item>
            <el-form-item label="用户id">
              <el-input v-model="form.tenantID"></el-input>
            </el-form-item>
            <el-form-item label="参与时间" >
              <el-date-picker
                v-model="form.participationDate"
                type="date"
                placeholder="参与日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                style="width: 100%;"
              >
                <el-input v-model="form.participationDate"></el-input>
              </el-date-picker>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
        </el-dialog>


      </el-main>

    </el-container>
  </el-container>
</template>

<script>

import ZuiButton from "../components/Button.vue";
import Page from "../components/Page.vue";
import Logo from "../components/Logo.vue";
import ZuiHeader from "../components/Header.vue";
import ZuiFooter from "../components/Footer.vue";
import DropList from "vue-droplist";

export default {
  name: 'Home',
  components: {Page, Logo, ZuiHeader, ZuiFooter, ZuiButton, DropList},
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg',
      campaignID : '',
      participantID: '',
      form:{},
      dialogFormVisible:false,
      configData: {
        position: {  // XXXXXXXXXXXX，position
          top: '60px',
          right: '15px',
          bottom: '',
          left: ''
        },
        width: '40%', // XXXXXXXX
        list: [ // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          {text: 'XXXX', action: this.gohome},
          {text: 'XXXXXXXX', action: this.goservice},
          {text: 'XXXXXXXX', action: this.goplan},
          {text: 'XXXXXXXX', action: this.gocase},
          {text: 'XXXXXXXX', action: this.golink},
          {text: 'XXXXXXXX', action: this.goAboutMarketing},
          {text: 'XXXXXXXX', action: this.goMarketingManagementSystem},
          {text: 'XXXXXXXX', action: this.goMarketingPartManagementSystem}
        ]
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    onButtonClick: function (e) {
      if (e == "MarketingPartManagementSystem") {
        this.$router.push({path: '/MarketingPartManagementSystem'})
      } else if(e == "MarketingManagementSystem") {
        this.$router.push({path: '/MarketingManagementSystem'})
      }
    },
    goMarketingManagementSystem: function () {
      this.$router.push({path: '/MarketingManagementSystem'})
    },
    goMarketingPartManagementSystem: function () {
      this.$router.push({path: '/MarketingPartManagementSystem'})
    },
    formatDate(row, column) {
      const dateTime = row[column.property];
      if (dateTime === null) {
        return null; // 如果日期为 null，直接返回 null
      } else {
        const date = new Date(dateTime);
        // 只返回日期部分，不包括时间
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      }
    },

    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }

    },
    load() {
      // request.get("http://localhost:8080/MarketingManagementSystem/page?pageNum=" + this.pageNum +
      //   "&pageSize=" + this.pageSize + "&campaignName="+this.infor+"").then(res => {
      //   console.log(res)
      // })

      const queryParams = new URLSearchParams({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        campaignID: this.campaignID,
      });
      // 请求分页查询数据
      fetch(`http://localhost:8080/AboutMarketing/page?${queryParams}`)
        .then(res => res.json())
        .then(res => {
          console.log(res);
          this.tableData = res.records;
          this.total = res.total;
        })
        .catch(error => {
          console.error('Fetch error:', error);
        });
    },
    del(id) {
      fetch(`http://localhost:8080/AboutMarketing/${id}`, {
        method: 'DELETE'
      })
        .then(response => {
          if (response.ok) {
            console.log(`ID为${id}的资源删除成功`);
            // 如果需要更新页面或其他操作，可以在这里添加代码
          } else {
            console.error('删除请求未成功');
          }
        })
        .catch(error => {
          console.error('删除请求失败:', error);
        });
      this.load();
    },
    edit(row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
    save() {
      fetch('http://localhost:8080/AboutMarketing', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.form)
      })
        .then(res => res.json())
        .then(responseData => {
          // 处理成功响应
          console.log('新增成功:', responseData);
          // 如果需要更新页面或其他操作，可以在这里添加代码
        })
        .catch(error => {
          // 处理错误
          console.error('新增失败:', error);
        });
      this.dialogFormVisible = false;
      this.load();
    },
    reset() {
      this.campaignName = '';
      this.campaignType = '';
      this.load();
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee !important;
}
</style>


<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ml-5 {
  margin-left: 5px;
}

.mr-5 {
  margin-right: 5px;
}

.pd-10 {
  padding: 10px 0;
}
</style>

